<template>
  <el-dialog
    class="orderDetail"
    title="Order Information"
    :visible.sync="DetVisible"
    width="750px"
    @close="closeDet"
  >
    <div v-loading="loading">
      <template v-if="orderDetail">
        <el-row class="toplogstics">
          <span>Logistics —</span>
          <span class="logtics">{{
            orderDetail.orderLogistics.logisticsName
          }}</span>
          <span>Waybill —</span>
          <span class="logtics">{{ orderDetail.order.waybill }}</span>
        </el-row>
        <el-row class="topTwo">
          <span
            class="infoNum"
          >Order Number: {{ orderDetail.order.orderNumber }}</span>
          <span
            class="infoNum"
          >Package Number: {{ orderDetail.order.packageNo }}</span>
          <!-- <span class="infoNum">跟踪号--</span> -->
          <span
            class="infoNum"
          >Store Name: {{ orderDetail.order.storeName }}</span>
        </el-row>
        <el-form
          ref="ruleForm"
          :rules="rules"
          :model="orderDetail.orderLogistics"
        >
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item prop="name" label="Name">
                <el-input v-model="orderDetail.orderLogistics.name" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="phone" label="Phone">
                <el-input v-model="orderDetail.orderLogistics.phone" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item prop="email" label="Email">
                <el-input v-model="orderDetail.orderLogistics.email" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="zipcode" label="Zip">
                <el-input v-model="orderDetail.orderLogistics.zipcode" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item prop="country" label="Country">
                <el-input v-model="orderDetail.orderLogistics.country" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="countryCode" label="Country code">
                <el-select
                  v-model="orderDetail.orderLogistics.countryCode"
                  placeholder="CountryCode"
                  filterable
                  @visible-change="countries"
                >
                  <el-option
                    v-for="(item, index) in countryOptions"
                    :key="index"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item prop="province" label="Province/State">
                <el-input v-model="orderDetail.orderLogistics.province" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="provinceCode" label="Province/State Code">
                <el-input v-model="orderDetail.orderLogistics.provinceCode" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item prop="city" label="City">
                <el-input v-model="orderDetail.orderLogistics.city" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="street" label="Adress1">
                <el-input v-model="orderDetail.orderLogistics.street" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="Adress2">
                <el-input v-model="orderDetail.orderLogistics.address" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="ResendReason">
                <el-input
                  v-model="orderDetail.order.resendReason"
                  type="textarea"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="Remarks">
                <el-input v-model="orderDetail.order.note" type="textarea" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <el-table :data="orderDetail.orderDetails" border style="width: 100%">
          <el-table-column label="Picture" min-width="100">
            <template slot-scope="slotScope">
              <img
                :src="
                  slotScope.row.orderDetail.thumbnailUri.indexOf('http') === 0
                    ? slotScope.row.orderDetail.thumbnailUri
                    : imgPrefix +
                      slotScope.row.orderDetail.thumbnailUri +
                      imgSuffix
                "
                alt
                style="max-width: 50px"
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="orderDetail.name"
            label="Name"
            min-width="200"
          />
          <el-table-column label="SKU-PRICE-NUM" min-width="200">
            <template slot-scope="slotScope">
              <div>
                {{ slotScope.row.orderDetail.sku }} -
                {{ Number(slotScope.row.orderDetail.price).toFixed(2) }} -
                <span style="color:red;">{{
                  slotScope.row.orderDetail.quantity
                    ? slotScope.row.orderDetail.quantity
                    : 1
                }}</span>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <el-row class="toplogstics" style="margin-bottom:0;">
          <span>Total amount</span>
          <span class="logtics">${{ orderDetail.order.totalPrice / 100 }}</span>
          <span>Total quantity</span>
          <span class="logtics">{{ orderDetail.order.totalNumber }}</span>
          <span>Total freight amount</span>
          <span
            class="logtics"
          >${{
            Number(orderDetail.order.totalPrice / 100 - productPrice).toFixed(
              2
            )
          }}</span>
          <div style="text-align:right;padding:10px 0 0;">
            <el-button size="medium" @click="closeDet">Cancel</el-button>
            <el-button
              v-preventReClick
              size="medium"
              type="primary"
              @click="submitDetail"
            >Confirm</el-button>
          </div>
        </el-row>
      </template>
    </div>
  </el-dialog>
</template>

<script>
import { orderRead, orderEdit } from '@/api/store';
import { countries } from '@/api/common';
export default {
  props: {
    id: {
      type: Number,
      required: true
    },
    fatherInit: {
      type: Function,
      default: () => ({})
    }
  },
  data() {
    return {
      DetVisible: true,
      loading: false,
      orderDetail: null,
      countryOptions: [],
      productPrice: 0,
      snapshotdeclareInfo: {},
      declareInfo: {},
      editIndex: 0,
      rules: {
        name: [{ validator: this.checkStr, required: true, trigger: 'blur' }],
        phone: [
          {
            required: true,
            message: 'Please enter the telephone number',
            trigger: 'blur'
          }
        ],
        zipcode: [
          { validator: this.checkStr, required: true, trigger: 'blur' }
        ],
        country: [
          { validator: this.checkStr, required: true, trigger: 'blur' }
        ],
        countryCode: [
          { validator: this.checkStr, required: true, trigger: 'blur' }
        ],
        province: [
          { validator: this.checkStr, required: true, trigger: 'blur' }
        ],
        provinceCode: [
          { validator: this.checkStr, required: true, trigger: 'blur' }
        ],
        city: [{ validator: this.checkStr, required: true, trigger: 'blur' }],
        street: [{ validator: this.checkStr, required: true, trigger: 'blur' }],
        email: [
          {
            type: 'email',
            message: 'Please enter the correct email address',
            trigger: 'blur'
          }
        ]
      }
    };
  },
  mounted() {
    this.getDetail(this.id);
  },
  methods: {
    getDetail(id) {
      this.loading = true;
      orderRead(id).then((res) => {
        this.loading = false;
        this.orderDetail = res.data;
        res.data.orderDetails.forEach((item, index) => {
          this.productPrice += Number(
            item.orderDetail.price * item.orderDetail.quantity
          );
        });
      });
    },
    countries(val) {
      if (val) {
        countries().then((res) => {
          this.countryOptions = res.data;
        });
      }
    },
    submitDetail() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          delete this.orderDetail.orderLogistics['createTime'];
          delete this.orderDetail.orderLogistics['updateTime'];
          orderEdit({
            note: this.orderDetail.order.note,
            logistics: this.orderDetail.orderLogistics,
            productOrderId: this.id,
            productDeclareInfos: []
          }).then((res) => {
            if (res.code === 200) {
              this.closeDet();
              this.fatherInit();
            }
          });
        } else {
          return this.$message.warning(
            'Please fill in the necessary information'
          );
        }
      });
    },
    closeDet() {
      this.$emit('closeDet');
    },
    getValue(obj, key, key1, resultValue) {
      if (!obj[key]) {
        obj[key] = {};
      }
      if (!obj[key][key1]) {
        obj[key][key1] = '';
      }
      return obj[key][key1] ? obj[key][key1] : resultValue;
    },
    reset() {
      this.declareInfo = this.snapshotdeclareInfo;
    },
    handelClick(row) {
      this.declareInfo = JSON.parse(JSON.stringify(row));
    }
  }
};
</script>
<style lang="scss" scoped>
.orderDetail {
  .toplogstics {
    font-size: 20px;
    color: #000;
    margin: 0 0 20px;
    .logtics {
      font-size: 16px;
      margin: 0 10px;
    }
  }
  .topTwo {
    margin: 10px;
    .infoNum {
      margin-right: 16px;
    }
  }
  .el-form {
    padding: 0 20px;
    .el-select {
      width: 100%;
    }
  }
}
</style>
